<template>
  <div class="article-detail">
    <a href="#/" class="ico-home"></a>
    <div class="detail-box">
      <div class="banner">
        <img class="img-banner" :src="articles.cover"/>
      </div>
      <div class="photo-box" v-if="articles.article_id">
        <span class="photo">
          <!--<img :src="articles.avatar||'http://api.piver.cn/image/users/'+articles.article_id+'.jpg'" alt=""-->
               <!--/>-->
        </span>
        <div class="zuozhe" v-if="articles.author">{{articles.author}}<b>·</b>{{articles.date_added}}</div>
      </div>
      <div class="clearfix top-font">
        <div class="fl">
          <div class="ico">原创</div>
        </div>
        <div class="fr">
          <div class="font">{{articles.subject}}</div>
        </div>
      </div>
      <div class="article-detail-content" v-html="articles.message">
      </div>
      <div class="buy-shop clearfix" v-if="product_ids.product_id"
           @click="gotoAddress('/shop/details/'+product_ids.product_id)">
        <div class="fl">
          <div class="img"><img class="img-banner" :src="product_ids.image"/></div>
        </div>
        <div class="fc">
          <div class="tt">【{{product_ids.product_cs}}】{{product_ids.product_name}}</div>
          <div class="price">¥{{product_ids.price}}</div>
        </div>
        <div class="fr">
          <button class="buy">购买</button>
        </div>
      </div>
    </div>
    <div class="other-article">
      <div class="tt">相关文章</div>
      <div class="clearfix listbox">
        <div class="list" v-for="item in articles.relate">
          <div class="img"><a @click="redirect(item.article_id)"><img :src="item.cover"/></a></div>
          <div class="ms"><a @click="redirect(item.article_id)">{{item.subject}}</a></div>
        </div>
      </div>
    </div>
    <div class="all-discuss">
      <div class="tt">评论</div>

      <div class="no-pj" v-if="!haveComments">暂无评价</div>

      <div class="discuss-box" v-if="haveComments">
        <div class="list clearfix" v-for="item in comments">
          <div class="fl">
            <div class="img">
              <!--<img class="photo-ico" src="../../assets/details/people-head.png"/>-->
              <img class="photo-ico" :src="'http://api.piver.cn/image/users/'+item.customer_id+'.jpg'"
                   @click="gotoAddress({path:'/otherIndex?id='+item.customer_id})"/>
            </div>
          </div>
          <div class="fc">
            <div class="my-discuss-box" @click="popUpReplayFn(item.firstname,item.id)">
              <div class="name">{{item.firstname}}</div>
              <div class="replay">{{item.content}}</div>
              <div class="time">{{item.date_added}}</div>
            </div>
            <div class="other-discuss-box" v-if="item.child.length">
              <div class="other-d-b" v-for="value in item.child">
                <div class="discuss-other-photo">
                  <span class="photo-other">
                    <img class="photo-ico" :src="'http://api.piver.cn/image/users/'+value.customer_id+'.jpg'"
                         @click="gotoAddress({path:'/otherIndex?id='+value.customer_id})"/>
                  </span>
                  <span class="name">{{value.firstname}}</span>
                </div>
                <div class="replay">{{value.content}}</div>
                <div class="time">{{value.date_added}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="pj-from-box">
        <div class="textarea"><textarea name="" placeholder="添加评价" v-model="content"></textarea></div>
        <div class="btn-box">
          <mt-button type="danger" size="small" @click="commentAdd">提交评价</mt-button>
        </div>
      </div>


    </div>

    <div class="tool-footer">
      <div class="tab-item" id="pinglun">
        <span class="pl-ico"><img src="../../assets/content/icoa1.png" alt=""></span>
        <span class="font">评论</span>
        <span class="dian"></span>
        <span class="pl-num">{{articles.commenttimes}}</span>
      </div>
      <div class="tab-item" id="zanBtn">
        <span class="pl-ico" v-if="!zanBool"><img src="../../assets/content/icoa2.png" alt=""></span>
        <span class="pl-ico active" v-else><img src="../../assets/content/icoa2-ac.png" alt=""></span>
        <span class="font">赞</span>
        <span class="dian"></span>
        <span class="pl-num">{{zanNumber}}</span>
      </div>
      <div class="tab-item" id="shoucangBtn">
        <span class="pl-ico" v-if="!shoucangBool"><img src="../../assets/content/icoa3.png" alt=""></span>
        <span class="pl-ico active" v-else><img src="../../assets/content/icoa3-ac.png" alt=""></span>
        <span class="font">收藏</span>
        <span class="dian"></span>
        <span class="pl-num">{{shoucangNumber}}</span>
      </div>
    </div>


    <mt-popup v-model="popupVisible" position="bottom" class="mint-popup-3" :modal="false">
      <div class="pop-box">
        <div class="txt-box clearfix">
          <div class="fl">回复{{usernameByComment}}：</div>
          <div class="fc"><input type="text" class="text" v-model="replayContent" placeholder="请输入您的评论内容"
                                 v-blurs="{hideReplay:hideReplay}"></div>
        </div>
        <div class="send-box">
          <span class="send-btn" @click="submitReplayContent()">发表</span>
        </div>
      </div>
    </mt-popup>

  </div>
</template>

<script>
  import {Toast} from 'mint-ui' ;

  export default {
    name: 'Content',
    data () {
      return {
        msg: 'reg',
        popupVisible: false,
        articles: {},
        product_ids: {},
        comments: [],
        haveComments: false,
        content: '',
        zanBool: false,
        zanNumber:'',
        shoucangNumber:'',
        shoucangBool: false,
        usernameByComment: "",
        commentId: "",
        replayContent: "",
        isLogin: sessionStorage.user && JSON.parse(sessionStorage.user).login || 0
      }
    },
    directives: {
      blurs: {
        bind(el, binding){
          el.addEventListener("blur", function () {
            binding.value.hideReplay();
          })
        }
      }
    },
    methods: {
      gotoAddress(path){
        this.$router.push(path)
      },
      hideReplay(){
        this.popupVisible = false;
      },
      /**
       * @description 谈起评论层
       * @param username 被评论人的名字
       * @param id  对应评论的id
       */
      popUpReplayFn(username, id){

        this.usernameByComment = username;
        this.commentId = id;
        this.replayContent = "";
        let userName = sessionStorage.user && JSON.parse(sessionStorage.user).name;
        if (!this.isLogin) {
          this.$router.push({
            path: '/login',
            query: {redirect: this.$route.fullPath}
          });
          return;
        }
        if (userName === this.usernameByComment) {
          Toast("不能评论自己的评论");
          this.popupVisible = false;
          return;
        }
        this.popupVisible = true;

      },
      submitReplayContent(){
        if (this._checkoutReplayContent()) {
          let ajaxData = {};
          ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
          ajaxData.id = this.commentId;
          ajaxData.type = 1;
          ajaxData.content = this.replayContent;
          this.sendContent(ajaxData);
        }
        this.popupVisible = false;
      },
      _checkoutReplayContent(){
        if (this.replayContent === "请输入您的评论内容") {
          Toast("请输入您的评论内容");
          return false;
        }
        else if (this.replayContent.length < 5 && this.replayContent.length > 0) {
          Toast("评论内容必须超过5个字");
          return false;
        }
        else if (this.replayContent.length === 0) {
          Toast("评论不能为空");
          return false;
        }
        return true;
      },
      sendContent(ajaxData){
        let _this = this;
        setTimeout(function () {
          $.ajax({
            type: 'post',
            url: RouteMap.commentAdd,
            data: ajaxData,
            success: function (res) {
              if (res.code == 200) {
                _this.getComment();
                setTimeout(function(){

                  _this.getArticle(_this.$route.params.id);

                },100)
                _this.content = '';
                Toast('评论成功');
              }
              else {
                Toast(res.msg);
              }
            },
            error: function () {
              Toast("评论失败");
            }
          })
        })
      },
      getArticle: function (id) {
        $('body').scrollTop(0);
        var ajaxData = {};
        var _this = this;
        ajaxData.article_id = id;
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        $.ajax({
          type: 'post',
          url: RouteMap.getContentsArticle,
          data: ajaxData,
          success: function (res) {
            if (res.code == 200) {

              _this.articles = res.data;
              _this.zanNumber = res.data.liketimes;
              _this.shoucangNumber = res.data.favtimes;
              console.log(res.data);
              _this.product_ids = res.data.product_ids;
              _this.zanBool = res.data.likestatus;
              _this.shoucangBool = res.data.favstatus;
//              _this.articles.message = _this.articles.message + `<img data-v-1ef3e65c="" src="http://api.piver.cn/image/users/22.jpg">`;

            }
            else {
              Toast(res.msg);
            }
          }
        })
      },
      gotoAddress(path){
        this.$router.push(path)
      },
      redirect: function (id) {
        //alert(1)
        this.getArticle(id);
        this.$router.push({path: '/content/article/' + id});
        this.getComment();
      },
      getComment: function () {
        var productId = this.$route.params.id;
        var _this = this;

        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.id = productId;
        ajaxData.type = 3;

        setTimeout(function () {
          $.ajax({
            type: 'post',
            url: RouteMap.comments,
            data: ajaxData,
            success: function (res) {
              if (res.code == 200) {
                if (res.data.list && res.data.list.length > 0) {
                  _this.haveComments = true;
                  _this.comments = res.data.list;
                }
                else {
                  _this.haveComments = false;
                }
              }
              else {
                //Toast(res.msg)
              }
            }
          })
        })
      },
      commentAdd: function () {
        if (!this.isLogin) {
          this.$router.push({
            path: '/login',
            query: {redirect: this.$route.fullPath}
          });
          return;
        }
        let productId = this.$route.params.id;
        let _this = this;
        let ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.id = productId;
        ajaxData.type = 3;
        ajaxData.content = _this.content;
        this.sendContent(ajaxData);
      }

    },
    mounted: function () {

//      this.getArticle(this.$route.params.id);
//      this.getComment();

      var _this = this;
      _this.getComment();
      setTimeout(function(){
        _this.getArticle(_this.$route.params.id);
      },100)

      $('#pinglun').on('click', function () {
        var top = $('.all-discuss').offset().top;
        $('body').scrollTop(top);
      });


      $('#zanBtn').on('click', function () {

        var token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
        if (token == '') {
//          _this.$router.push('/login');
          _this.$router.push({path: '/login', query: {redirect: location.hash.replace('#', '')}});
          return;
        }

        var productId = _this.$route.params.id;


        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.object_id = productId;
        ajaxData.type = 3;

        if (_this.zanBool) {

          $.ajax({
            type: 'post',
            url: RouteMap.cancelZan,
            data: ajaxData,
            success: function (res) {
              if (res.code == 200) {
                Toast('取消点赞成功');
                _this.zanBool = false;
                _this.zanNumber = Number(_this.zanNumber)- 1;

              }
              else {
                //Toast(res.msg)
              }
            }
          })

        }
        else {
          $.ajax({
            type: 'post',
            url: RouteMap.zan,
            data: ajaxData,
            success: function (res) {
              if (res.code == 200) {
                Toast('点赞成功');
                _this.zanBool = true;
                _this.zanNumber = Number(_this.zanNumber)+ 1;

              }
              else {
                //Toast(res.msg)
              }
            }
          })
        }
      });

      $('#shoucangBtn').on('click', function () {

        var token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
        if (token == '') {
//          _this.$router.push('/login');
          _this.$router.push({path: '/login', query: {redirect: location.hash.replace('#', '')}});
          return;
        }

        var productId = _this.$route.params.id;


        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.article_id = productId;

//        alert($(this).find('.active').length)
        var $this = $(this);
        if (_this.shoucangBool) {

          $.ajax({
            type: 'post',
            url: RouteMap.articleScRemove,
            data: ajaxData,
            success: function (res) {
              if (res.code == 200) {

                _this.shoucangBool = false;

                Toast('取消收藏成功');
                _this.shoucangNumber = Number(_this.shoucangNumber)-1;

              }
              else {
                //Toast(res.msg)
              }
            }
          })

        }
        else {
          $.ajax({
            type: 'post',
            url: RouteMap.articleSc,
            data: ajaxData,
            success: function (res) {
              if (res.code == 200) {
                Toast('收藏成功');
                _this.shoucangBool = true;
                _this.shoucangNumber = Number(_this.shoucangNumber)+1;

              }
              else {
                //Toast(res.msg)
              }
            }
          })
        }


      })
    },
    components: {}
  }
</script>

<style scoped>
  .article-detail {
    padding-bottom: 2rem;
    font-size: .6rem;
  }

  .detail-box {
    padding: 0 1rem;
  }

  .banner img {
    width: 100%;
  }



  .photo-box {

    width:100%;

    margin-top: -1.5rem;
    text-align: center;
  }

  .photo {
    display: inline-block;
    min-height:2rem;
  }

  .photo img {
    width: 3rem;
    height: 3rem;
    border: 2px solid #fff;
    border-radius: 3rem;

  }
  .photo-box .zuozhe{
    font-size: .5rem;
    color:#707070;
  }

  .photo-box .zuozhe b{
    color:#B01F24;
    padding:0 .2rem;
    font-size: .8rem;

  }

  .dian {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: red;
    margin: 0 0.2rem;

  }

  .other {
    padding-top: 1rem;
    text-align: center;
  }

  .other span {
    vertical-align: middle;
  }

  .guanzhu {
    border: 1px solid #ff7b80;
    border-radius: 4px;
    color: #ff7b80;
    width: 2rem;
    display: inline-block;
  }

  .guanzhu-active {
    border: 1px solid #ff7b80;
    border-radius: 4px;
    color: #fff;
    background: #ff7b80;
    width: 2rem;
    display: inline-block;
  }

  .top-font {
    padding: 1rem 0;
    font-size: .9rem;
    color: #1b1b1b;
  }

  .top-font .fl {
    width: 2rem;
  }

  .top-font .fr {
    width: 11.5rem;
  }

  .ico {
    width: 2rem;
    height: 2rem;
    background: url("../../assets/content/ico.png");
    background-size: 100% 100%;
    font-size: .5rem;
    text-align: center;
    line-height: 2rem;
    color: #fff;
  }

  .auth-box .follow {
    display: inline-block;
    width: 0.6rem;
    margin-right: 0.2rem;
  }

  .auth-box .pinglun {
    display: inline-block;
    width: 0.5rem;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
  }

  .article-detail-content {

  }

  .article-detail-content p {
    line-height: 1rem;
    margin-top: 0.2rem;
    word-break: break-all;
  }


  .buy-shop {
    border: 1px solid #707070;
    border-radius: 1rem;
    padding: .5rem;
    margin-top: 1rem;
    color: #707070;
  }

  .buy-shop .fl {
    width: 2rem;
    margin-right: .5rem;
  }

  .buy-shop .fl img {
    width: 100%;
  }

  .buy-shop .fc {
    width: 8rem;
    margin-top: .3rem;
  }

  .buy-shop .fc .tt {
    font-size: .65rem;
  }

  .buy-shop .fr {
    width: 2rem;
  }

  .buy-shop .buy {
    display: inline-block;
    border: 1px solid #b01f24;
    color: #b01f24;
    background: #fff;
    width: 2rem;
    margin-top: .6rem;
    padding:.2rem 0;
  }

  .other-article {
    color:#707070;
  }

  .other-article .tt {
    font-size: .7rem;
    padding: 1rem 0.8rem;
    color: #b01f24;
  }

  .other-article .list {
    float: left;
    width: 4.2rem;
    margin-left: .82rem;
    font-size: .5rem;
  }

  .other-article .list img {
    width: 100%;
  }

  .other-article .list .ms {
    margin-top: .3rem;
    word-wrap: break-word;
  }

  .all-discuss {

  }


  .all-discuss .tt {
    font-size: .7rem;
    padding: 1rem 0.8rem;
    color: #b01f24;
  }

  .discuss-box {
    padding: 0 .8rem;
    font-size: .65rem;
  }

  .discuss-box .list {
    margin-bottom: 1rem;
  }

  .discuss-box .list .fl {
    width: 2rem;

  }

  .discuss-box .list .fc {
    width: 11.5rem;
    margin-left: .5rem;
    line-height: 1rem;

  }

  .discuss-box .list .time {
    color: #C2C2C2;
    font-size: .55rem;
  }

  .discuss-box .list .photo-ico {
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
  }

  .other-discuss-box {
    background: #f5f5f5;
    border-radius: .5rem;
    padding: .5rem;
    margin-top: .5rem;
  }

  .discuss-other-photo span {
    vertical-align: middle;
    display: inline-block;
    color: #707070;
  }

  .discuss-other-photo .ico1 img {
    vertical-align: middle;
    height: .3rem;
  }

  .discuss-box .list .replay {
    padding: .3rem 0;
  }

  .discuss-box .list .more {
    padding-top: .3rem;
    color: #b01f24;
  }

  .tool-footer {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #f5f5f5;
    padding: .7rem 0;
    color: #707070;

  }

  .tab-item {
    width: 5.1rem;
    display: inline-block;
    text-align: center;
  }

  .tab-item span {
    display: inline-block;
    vertical-align: middle;
  }

  .tab-item .pl-ico img {
    height: .8rem;
  }

  .mint-popup-3 {
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #eee;
    padding: .5rem;
  }

  .pop-box {
    padding: 0 .5rem;
  }

  .pop-box .txt-box {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #707070;
    border-radius: 0.3rem;
    height: 1.5rem;
    padding: 0 0.5rem;
  }

  .pop-box .txt-box .text {
    line-height: 1.5rem;
    height: 1.5rem;
    width: 8rem;
  }

  .pop-box .fl {
    line-height: 1.5rem;
    height: 1.5rem;
    color: #d2d2d2;
    width: 4rem;
    overflow-y: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .pop-box .send-box {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.3rem;
  }

  .pj-from-box {
    text-align: left;
    padding: 1rem 0.8rem;
  }

  .pj-from-box textarea {
    border: 1px solid #ccc;
    display: block;
    width: 13.8rem;
    padding: .3rem;
    font-size: .5rem;
    border-radius: .1rem;
    height: 2.5rem;
  }

  .no-pj {
    text-align: center;
  }

  .btn-box {
    padding-top: .5rem;
  }
</style>
